<template>
  <div class="sea_right flexC">
    <div class="flex1 right_top flexC">
      <p class="colorF textR">
        <span>监管预警</span>
        <img class="verticM" style="height: 1.125rem;padding-left: 0.5rem;" src="../../assets/img/data/18.png" alt="" />
      </p>
      <ul class="flex1 flex JustifyContentSA AlignItemsC textC">
        <li class="" @click="model = true">
          <p class="Acens font_s36" style="color: #51F445;">{{ creditForm.gyxy1 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">活动备案</p>
        </li>
        <li class="" @click="model1 = true">
          <p class="Acens font_s36" style="color: #FFE825;">{{ creditForm.gyxy2 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">信访舆情</p>
        </li>
        <li class="" @click="model2 = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy3 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            社会组织
            <br />
            违规情况
          </p>
        </li>
        <li class="" @click="model3 = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy4 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            非法社会
            <br />
            组织举报
          </p>
        </li>
      </ul>
      <ul class="flex1 flex JustifyContentSA AlignItemsC textC">
        <li class="" @click="model4 = true">
          <p class="Acens font_s36" style="color: #ffe825;">4</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            社团3月
            <br />
            内需换届
          </p>
        </li>
        <li class="" @click="model5 = true">
          <p class="Acens font_s36" style="color: #51f445;">25</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            当年
            <br />
            已换届
          </p>
        </li>
        <li class="" @click="model6 = true">
          <p class="Acens font_s36" style="color: #51f445;">13</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            换届
            <br />
            已延期
          </p>
        </li>
        <li class="" @click="model7 = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy8 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            证书
            <br />
            已过期
          </p>
        </li>
      </ul>
      <ul class="flex1 flex JustifyContentSA AlignItemsC textC">
        <li class="" @click="model8 = true">
          <p class="Acens font_s36" style="color:#ffe825;">97</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            民非3月
            <br />
            内需换证
          </p>
        </li>
        <li class="" @click="model9 = true">
          <p class="Acens font_s36" style="color: #51f445;">231</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            当年
            <br />
            已换证
          </p>
        </li>
        <li class="" @click="model10 = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy11 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            证书
            <br />
            已过期
          </p>
        </li>
        <li class="" @click="model11 = true">
          <p class="Acens font_s36" style="color: #ffe825;">0</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">
            基金会3月
            <br />
            内需换证
          </p>
        </li>
      </ul>
    </div>
    <div class="flex1 right_bottom flexC">
      <div class="flex JustifyContentSB" style="padding-left: 1rem ;">
        <p class="flex colorF textR">
          <img class="verticM" style="height: 1.125rem;padding-left: 0.5rem;" src="../../assets/img/data/18.png" alt="" />
          <span>2017</span>/
          <span>2018</span>
        </p>
        <p class="colorF textR">
          <span>年检情况</span>
          <img class="verticM" style="height: 1.125rem;padding-left: 0.5rem;" src="../../assets/img/data/18.png" alt="" />
        </p>
      </div>
      <div class="flex flex3">
        <div class="flexC JustifyContentC AlignItemsC">
          <div class="flex Regular font_s18 LH3R textbox">
            <p style="color: #A9B2F7;">
              实际年检
              <br />
              未年检
              <br />
              年检率
            </p>
            <p style="color: #FEFEFE;">
              1893
              <br />
              257
              <br />
              88%
            </p>
          </div>
        </div>
        <div id="echarts_3"></div>
      </div>
      <ul class="flex2 Regular flex textC JustifyContentSA textbox2">
        <li>
          <p class="font_s30" style="color: #ffe825;">225</p>
          <p class="colorF">当年未参检</p>
        </li>
        <li>
          <p class="font_s30" style="color: #f68852;">228</p>
          <p class="colorF">连续两年及以上未参检</p>
        </li>
        <li>
          <p class="font_s30" style="color: #f68852;">141</p>
          <p class="colorF">名存实亡</p>
        </li>
      </ul>
    </div>

    <Modal v-if="model" @hidden="hidden"><img class="bj" src="../../assets/img/comprehensive/108.png" alt="" /></Modal>
    <Modal v-if="model1" @hidden="hidden1"><img class="bj" src="../../assets/img/data/bjdata/01.png" alt="" /></Modal>
    <Modal v-if="model2" @hidden="hidden2"><img class="bj" src="../../assets/img/data/bjdata/02.png" alt="" /></Modal>
    <Modal v-if="model3" @hidden="hidden3"><img class="bj" src="../../assets/img/data/bjdata/13.png" alt="" /></Modal>
    <Modal v-if="model4" @hidden="hidden4"><img class="bj" src="../../assets/img/data/bjdata/04.png" alt="" /></Modal>
    <Modal v-if="model5" @hidden="hidden5"><img class="bj" src="../../assets/img/data/bjdata/05.png" alt="" /></Modal>
    <Modal v-if="model6" @hidden="hidden6"><img class="bj" src="../../assets/img/data/bjdata/06.png" alt="" /></Modal>
    <Modal v-if="model7" @hidden="hidden7"><img class="bj" src="../../assets/img/data/bjdata/07.png" alt="" /></Modal>
    <Modal v-if="model8" @hidden="hidden8"><img class="bj" src="../../assets/img/data/bjdata/08.png" alt="" /></Modal>
    <Modal v-if="model9" @hidden="hidden9"><img class="bj" src="../../assets/img/data/bjdata/09.png" alt="" /></Modal>
    <Modal v-if="model10" @hidden="hidden10"><img class="bj" src="../../assets/img/data/bjdata/10.png" alt="" /></Modal>
    <Modal v-if="model11" @hidden="hidden11"><img class="bj" src="../../assets/img/data/bjdata/11.png" alt="" /></Modal>
  </div>
</template>
<script>
import Modal from '@/components/Modal.vue'
export default {
  name: 'SeaRight',
  components: {
    Modal
  },
  data () {
    return {
      model: false,
      model1: false,
      model2: false,
      model3: false,
      model4: false,
      model5: false,
      model6: false,
      model7: false,
      model8: false,
      model9: false,
      model10: false,
      model11: false,
      creditForm: {
        gyxy1: 0,
        gyxy2: 0,
        gyxy3: 0,
        gyxy4: 0,
        gyxy5: 0,
        gyxy6: 0,
        gyxy7: 0,
        gyxy8: 0,
        gyxy9: 0,
        gyxy10: 0,
        gyxy11: 0,
        gyxy12: 0
      }
    }
  },
  mounted () {
    this.echarts()
    setInterval(() => {
      this.creditForm.gyxy1 = 0
      this.creditForm.gyxy2 = 0
      this.creditForm.gyxy3 = 0
      this.creditForm.gyxy4 = 0
      this.creditForm.gyxy5 = 0
      this.creditForm.gyxy6 = 0
      this.creditForm.gyxy7 = 0
      this.creditForm.gyxy8 = 0
      this.creditForm.gyxy9 = 0
      this.creditForm.gyxy10 = 0
      this.creditForm.gyxy11 = 0
      this.creditForm.gyxy12 = 0

      var creditInterval1 = null
      var creditInterval2 = null
      var creditInterval3 = null
      var creditInterval4 = null
      var creditInterval5 = null
      var creditInterval6 = null
      var creditInterval7 = null
      var creditInterval8 = null
      var creditInterval9 = null
      var creditInterval10 = null
      var creditInterval11 = null
      var creditInterval12 = null

      creditInterval1 = setInterval(() => {
        if (this.creditForm.gyxy1 >= 4) {
          this.creditForm.gyxy1 = 4
          clearInterval(creditInterval1)
        } else {
          this.creditForm.gyxy1 = parseInt(this.creditForm.gyxy1 + Math.ceil(4 / 10))
        }
      }, 100)

      creditInterval2 = setInterval(() => {
        if (this.creditForm.gyxy2 >= 14) {
          this.creditForm.gyxy2 = 14
          clearInterval(creditInterval2)
        } else {
          this.creditForm.gyxy2 = parseInt(this.creditForm.gyxy2 + Math.ceil(14 / 10))
        }
      }, 100)
      creditInterval3 = setInterval(() => {
        if (this.creditForm.gyxy3 >= 1) {
          this.creditForm.gyxy3 = 1
          clearInterval(creditInterval3)
        } else {
          this.creditForm.gyxy3 = parseInt(this.creditForm.gyxy3 + Math.ceil(1 / 10))
        }
      }, 100)
      creditInterval4 = setInterval(() => {
        if (this.creditForm.gyxy4 >= 2) {
          this.creditForm.gyxy4 = 2
          clearInterval(creditInterval4)
        } else {
          this.creditForm.gyxy4 = parseInt(this.creditForm.gyxy4 + Math.ceil(2 / 10))
        }
      }, 100)

      creditInterval5 = setInterval(() => {
        if (this.creditForm.gyxy5 >= 5) {
          this.creditForm.gyxy5 = 5
          clearInterval(creditInterval5)
        } else {
          this.creditForm.gyxy5 = parseInt(this.creditForm.gyxy5 + Math.ceil(5 / 10))
        }
      }, 100)
      creditInterval6 = setInterval(() => {
        if (this.creditForm.gyxy6 >= 25) {
          this.creditForm.gyxy6 = 25
          clearInterval(creditInterval6)
        } else {
          this.creditForm.gyxy6 = parseInt(this.creditForm.gyxy6 + Math.ceil(25 / 10))
        }
      }, 100)
      creditInterval7 = setInterval(() => {
        if (this.creditForm.gyxy7 >= 13) {
          this.creditForm.gyxy7 = 13
          clearInterval(creditInterval7)
        } else {
          this.creditForm.gyxy7 = parseInt(this.creditForm.gyxy7 + Math.ceil(13 / 10))
        }
      }, 100)
      creditInterval8 = setInterval(() => {
        if (this.creditForm.gyxy8 >= 74) {
          this.creditForm.gyxy8 = 74
          clearInterval(creditInterval8)
        } else {
          this.creditForm.gyxy8 = parseInt(this.creditForm.gyxy8 + Math.ceil(74 / 10))
        }
      }, 100)
      creditInterval9 = setInterval(() => {
        if (this.creditForm.gyxy9 >= 97) {
          this.creditForm.gyxy9 = 97
          clearInterval(creditInterval9)
        } else {
          this.creditForm.gyxy9 = parseInt(this.creditForm.gyxy9 + Math.ceil(97 / 10))
        }
      }, 100)

      creditInterval10 = setInterval(() => {
        if (this.creditForm.gyxy10 >= 231) {
          this.creditForm.gyxy10 = 231
          clearInterval(creditInterval10)
        } else {
          this.creditForm.gyxy10 = parseInt(this.creditForm.gyxy10 + Math.ceil(231 / 10))
        }
      }, 100)

      creditInterval11 = setInterval(() => {
        if (this.creditForm.gyxy11 >= 404) {
          this.creditForm.gyxy11 = 404
          clearInterval(creditInterval11)
        } else {
          this.creditForm.gyxy11 = parseInt(this.creditForm.gyxy11 + Math.ceil(404 / 10))
        }
      }, 100)

      creditInterval12 = setInterval(() => {
        if (this.creditForm.gyxy12 >= 0) {
          this.creditForm.gyxy12 = 0
          clearInterval(creditInterval12)
        } else {
          this.creditForm.gyxy12 = parseInt(this.creditForm.gyxy12 + Math.ceil(0 / 10))
        }
      }, 100)
    }, 5000)
  },

  methods: {
    hidden () {
      this.model = false
    },
    hidden1 () {
      this.model1 = false
    },
    hidden2 () {
      this.model2 = false
    },
    hidden3 () {
      this.model3 = false
    },
    hidden4 () {
      this.model4 = false
    },
    hidden5 () {
      this.model5 = false
    },
    hidden6 () {
      this.model6 = false
    },
    hidden7 () {
      this.model7 = false
    },
    hidden8 () {
      this.model8 = false
    },
    hidden9 () {
      this.model9 = false
    },
    hidden10 () {
      this.model10 = false
    },
    hidden11 () {
      this.model11 = false
    },
    echarts () {
      let myChart = this.$echarts.init(document.getElementById('echarts_3'))
      myChart.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['20%', '40%'],
            center: ['50%', '50%'],
            data: [{ value: 335, name: '不合格' }, { value: 310, name: '合格' }, { value: 234, name: '基本合格' }],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.sea_right {
  position: absolute;
  right: 1rem;
  top: 25%;
  height: 73%;
  width: 25%;
  .right_top {
    padding: 1rem;
    background: url(../../assets/img/data/14.png) no-repeat;
    background-size: 100% 100%;
  }
  .right_bottom {
    padding: 1rem;
    background: url(../../assets/img/data/15.png) no-repeat;
    background-size: 100% 100%;
    .textbox {
      padding: 0 1rem;
      margin-left: 2rem;
      background: url(../../assets/img/data/25.png) no-repeat;
      background-size: 100% 100%;
    }
    .textbox2 {
      margin-left: 2rem;
      background: url(../../assets/img/data/26.png) no-repeat;
      background-size: 100% 100%;
    }
    #echarts_3 {
      width: 15rem;
      height: 13rem;
      // background: forestgreen
    }
  }
  .bj {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
}
</style>
